<template>
  <div class="main">
    <main></main>
    <footer>
      <span><b>{{ product.title }}</b></span>
      <span>￥{{ product.price }}</span>
      <span>x{{ product.quantity }}</span>
    </footer>
  </div>
</template>
<script setup lang="ts">
import { IShopping_cart } from "~~/pinia_store/shopping_cart";

withDefaults(
  defineProps<{
    product: Omit<IShopping_cart, "id">;
  }>(),
  {
    product: () => ({
      title: "",
      price: 0,
      quantity: 1,
    }),
  }
);
</script>
<style scoped>
.main {
  width: 10rem;
  margin: 0.5rem;
}
main {
  height: 6rem;
  border-radius: 0.2rem;
  box-shadow: gray 1px 1px 4px 0;
}
footer {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
}
footer span:first-of-type {
  flex: 1;
}
footer span {
  font-size: 0.5rem;
}
footer span:nth-of-type(2) {
  font-size: 1rem;
  color: tomato;
  margin-right: 0.5rem;
}
</style>
